<script setup>
import { addImageClassAPI, deleteImageClassAPI, getImageClassListAPI, updateImageClassAPI } from '@/api/image_class';
import AsideList from './AsideList.vue';
import { ref, onMounted, computed } from 'vue'
import FormDrawer from './FormDrawer.vue';
import { toast } from '@/composables/util';
// 加载动画
const loading = ref(false)
const list = ref([])
const activeId = ref(0)
// 分页
const total = ref(0)
const currentPage = ref(1)
const limit = ref(10)
const handleCurrentChange = (val) => {
  // console.log(val);
  currentPage.value = val
  getImageClassList(currentPage.value)
}
// 获取数据
const getImageClassList = async () => {
  loading.value = true
  const res = await getImageClassListAPI(currentPage.value)
  console.log(res);
  list.value = res.list
  total.value = res.totalCount
  const item = list.value[0]
  if (item) {
    // activeId.value = item.id
    handleChangeActiveId(item.id)
  }
  loading.value = false
}
onMounted(() => {
  getImageClassList()
})

const formDrawerRef = ref(null)


const form = ref({
  name: '',
  order: 50
})
const rules = {
  name: [
    { required: true, message: '图库分类名称不能为空', trigger: 'blur' }
  ]
}
const formRef = ref(null)
const handleSubmit = () => {
  formRef.value.validate(async valid => {
    if (!valid) {
      return false
    }
    // console.log('提交表单');
    formDrawerRef.value.showLoading()
    const fun = editId.value ? updateImageClassAPI(editId.value, form.value) : addImageClassAPI(form.value)
    console.log(fun);

    const res = await fun
    console.log(res);
    formDrawerRef.value.hideLoading()
    toast(drawerTitle.value + '成功')
    getImageClassList()
    formDrawerRef.value.closeDrawer()
  })
}

// 编辑图片分类
const editId = ref(0)
const drawerTitle = computed(() => {
  return editId.value ? '修改' : '新增'
})
const handleCreate = () => {
  editId.value = 0
  form.value.name = ''
  form.value.order = 50
  formDrawerRef.value.openDrawer()
}
const handleEdit = (item) => {
  // console.log(item);
  editId.value = item.id
  form.value.name = item.name
  form.value.order = item.order
  formDrawerRef.value.openDrawer()
}
const handleDelete = async (item) => {
  // console.log(item);
  const res = await deleteImageClassAPI(item.id)
  console.log(res);
  toast('删除成功')
  getImageClassList()
}

// 选中图库分类id
const emit = defineEmits(['change'])
const handleChangeActiveId = (id) => {
  activeId.value = id
  emit('change', id)
}
defineExpose({
  handleCreate,
})
</script>
<template>
  <el-aside width="220px" class="image-aside" v-loading="loading">
    <div class="top">
      <AsideList @click="handleChangeActiveId(item.id)" @delete="handleDelete(item)" @edit="handleEdit(item)"
        :active="activeId === item.id" v-for="(item, index) in list" :key="index" :item="item">
        {{ item.name }}
      </AsideList>
    </div>
    <div class="bottom">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="limit" background
        layout="prev, next" :total="total" />
    </div>
  </el-aside>
  <FormDrawer :title="drawerTitle" ref="formDrawerRef" @submit="handleSubmit">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number v-model="form.order" />
      </el-form-item>
    </el-form>
  </FormDrawer>
</template>
<style scoped>
.image-aside {
  border-right: 1px solid #eee;
  position: relative;
}


.image-aside .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-aside .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  @apply flex items-center justify-center;
}
</style>
